<template>
  <div class="comfooternav">
      <ul>
        <router-link v-for="item in navList" :to="item.path" :key='item.title' tag="li" active-class="active">
            <i :class="['iconfont', item.icon]"></i>
            <p>{{item.title}}</p>
        </router-link>
      </ul>
  </div>
</template>
<script>
export default ({
  name: 'comfooternav',
  data () {
    return {
      navList: [{
        title: '首页',
        icon: 'icon-shouye',
        path: '/home'
      }, {
        title: '分类',
        icon: 'icon-fenlei3',
        path: '/kind'
      }, {
        title: '购物车',
        icon: 'icon-gouwuche',
        path: '/cart'
      }, {
        title: '我的',
        icon: 'icon-wode',
        path: '/my'
      }]
    }
  }
})
</script>

<style lang="scss" scoped >
.comfooternav{
//   position: fixed;
//   bottom: 0px;
//   left: 0px;
//   border-top: 1px solid #ccc;
  height: 50px;
  text-align: center;
  background: #fff;
  color: #7a7e83;
  width: 100%;
  ul{
    display: flex;
    align-items: center;
    list-style: none;
    padding-bottom: 2px;
    li{
      margin-top: 5px;
      height: 43px;
      text-align: center;
      flex:1;
       p {
        margin-top: 2px;
      }
      i {
        font-size: 20px;
      }
    }
    .active{
      color: #fe5100;
    }
  }
}
</style>
